<template>
    <div id="app">
        <form-test :title="titleVar"></form-test>

        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <p v-if="showName">{{name}}</p>
        <ul>
            <li v-for="(good,index) in goods" :key="good.id">
                <span>{{good.text}}</span>
                <span>${{good.price}}</span>
                <button @click="addGood(good)">加入购物车</button>
            </li>
        </ul>
        <cart ref="mycart"></cart>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import Cart from './components/Cart.vue'
    import FormTest from './components/FormTest.vue'
    import axios from 'axios'

    export default {
        name: 'app',
        components: {
            HelloWorld, Cart, FormTest
        },
        data() {
            return {
                name: "hello vue",
                showName: false,
                goods: [],
                cart: [],
                titleVar: "form验证规则"
            }
        },
        methods: {
            addGood(good) {
                this.$bus.$emit("addCart", good);
            },

        },
        async created() {
            //创建钩子，组件创建完成
            setTimeout(() => {
                this.showName = true
            }, 10000)
            //查询产品列表
            try {
                const response = await axios.get('api/goods');
                this.goods = response.data.list;
            } catch (error) {

            }

        }
    }

</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
